@import '~choerodon-ui/lib/style/themes/default';

.c7ncd-deployment-cases-record {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: .14rem;
  height: 1rem;

  &::after {
    position: absolute;
    left: .65rem;
    top: .35rem;
    height: .02rem;
    width: 100%;
    background: rgba(0, 0, 0, 0.12);
    content: "";
  }

  &-arrow {
    margin-top: -0.04rem;

    .icon {
      font-size: .28rem;
    }
  }

  &-effectCommand {
    width: .32rem;
    height: .14rem;
    border-radius: .07rem;
    border: 1px solid rgba(0, 191, 165, 1);
    text-align: center;
    font-weight: 500;
    color: rgba(0, 191, 165, 1);
    margin-left: .07rem;
    line-height: .12rem;

    &-text {
      transform: scale(0.8);
      margin: 0;
      display: inline-block;
    }
  }

  &-error {
    color: #f44336;
    margin-left: .07rem;
  }

  .cases-record-title {
    margin-top: -0.3rem;
    white-space: nowrap;
    margin-right: .1rem;
  }

  .cases-record-detail {
    position: relative;
    display: flex;
    margin: 0 .1rem;
    flex: 1;
    overflow: auto;
    height: .96rem;

    .operation-record-card {
      display: flex;
      flex: 0 0 1.6rem;
      align-items: center;
      flex-direction: column;
      position: relative;
      padding: .07rem 0;
      width: 1.6rem;
      height: .92rem;
      text-align: center;
      cursor: pointer;
      background: transparent;

      .operation-record-title {
        font-size: .12rem;
        display: flex;
        align-items: center;

        span {
          margin-left: .02rem;
        }
      }

      .operation-record-time {
        font-size: .12rem;
        color: var(--text-color3);
        line-height: .2rem;
        transform: scale(0.9);
      }

      .operation-record-step {
        position: relative;
        width: 100%;

        //&:before {
        //  position: absolute;
        //  left: 0;
        //  top: 50%;
        //  height: .02rem;
        //  width: 100%;
        //  transform: translateY(-0.025rem);
        //  background: rgba(0, 0, 0, 0.12);
        //  content: "";
        //}

        .operation-record-icon {
          display: inline-block;
          width: .11rem;
          height: .11rem;
          color: @primary-color;
          border: .025rem solid;
          border-radius: 50%;
          background: #fff;
          transform: scale(0.8);
        }
      }

      &-active {
        .operation-record-time,
        .operation-record-title {
          color: @primary-color;
        }

        .operation-record-user {
          .c7ncd-userinfo-name {
            color: @primary-color;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            max-width: 1.3rem;
          }
        }

        .operation-record-icon {
          background: @primary-color !important;
        }
      }
    }
  }
}

.c7ncd-deployment-cases-status {
  &-failed {
    color: #f44336;
    vertical-align: text-bottom;
  }

  &-operating {
    color: #4d90fe;
    vertical-align: text-bottom;
  }

  &-success {
    color: #00bfa5;
    vertical-align: text-bottom;
  }
}
